<!DOCTYPE html>
<html>
<head>
	<title>Chat</title>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>


	<style type="text/css">
		body {
			margin: 0;
			background-image: url('background = C:\Users\Administrator\Desktop\websocket\zhao.jpg');
			background-repeat: no-repeat;
			background-size: cover;
			background-color: #22C3AA;
		}
	</style>

</head>
<body>
	
	<div>
		<textarea rows="20" , cols="50" id = "zhanshi" readonly="readonly">
		
	    </textarea>
	</div>
	<div>
		<textarea rows="5" cols="50" id="bianji">
		</textarea> 
		<br>
		<input type="button" id="butt" value="send" onclick="butt_click()">
	</div>
	


		<script type="text/javascript">
		var ws = new WebSocket('ws://' + {{.}} + ':8000/chat');
		var bianji = document.getElementById('bianji');
		bianji.onkeydown = function(event) {
			if (event.keyCode == '13') {
				butt_click();
			}
		}
		function butt_click() {
			var bianji = document.getElementById('bianji');
			var message = bianji.value;
			ws.send(message)
			bianji.value = "";
			var zhanshi = document.getElementById('zhanshi');
			console.log("zhanshi: " + zhanshi.innerHTML);
			
			//zhanshi.value = zhanshi.value + "\nyou said:\n" + "    " + message +'\n';
			
			zhanshi.scrollTop = zhanshi.scrollHeight;


			console.log("message : " , message);
		}
		ws.onopen = function() {
			console.log("connect already success.");
		}
		ws.onclose = function() {
			console.log("connect already close.")
		}
		ws.onmessage = function(event) {
			var message = event.data;
			var zhanshi = document.getElementById('zhanshi')
			zhanshi.value = zhanshi.value + message;
			console.log(event.data)
		}
	</script>
</body>
</html>